<template>
  <div class="single-page">
    <div class="table-bar" @keyup.enter="searchFunc">
      <LabelDatePicker v-model:selectDateRange="searchData.selectDateRange" labelName="导出时间："
                       @selectedChangeFunc="dateChangeFunc"/>

      <LabelInput v-model:input-value="searchData.creator" class="margin-left_20" labelName="操作用户"
                  placeholder="请输入操作用户">
      </LabelInput>
      <a-button class="margin-left_50" type="primary" @click="searchFunc" v-track="'下载中心 点击查询'">
        <template #icon>
          <SearchOutlined/>
        </template>
        查询
      </a-button>
    </div>
    <!-- 内容显示区域 -->
    <div class="content-area margin-top_20">
      <a-table :columns="columns" :data-source="dataSource" bordered class="adjust-table" size="middle"
               :pagination="pagination" :rowKey="(record: any) => record.id" :loading="state.loading"
               @change="handleTableChange" @resizeColumn="handleResizeColumn">
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-tag v-if="record.status == 0" color="#2db7f5" style="border-radius: 2px">导出中</a-tag>
            <a-tag v-if="record.status == 1" color="#2db7f5" style="border-radius: 2px">已完成</a-tag>
            <a-tag v-if="record.status == 2" color="#87d068" style="border-radius: 2px">已导出</a-tag>
          </template>

          <template v-if="column.dataIndex === 'operations'">
            <div class="operations-style">
              <div>
                <a-typography-link
                    v-track="'点击下载中心下载'"
                    @click="downloadFunc(record)">下载</a-typography-link>
              </div>
            </div>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue';
import type {TableColumnsType} from 'ant-design-vue';
import {message} from "ant-design-vue";
import dayjs from "dayjs";
import {post} from "@/service/request";


const state = reactive({
  loading: false,
});
// 表格相关
const columns = ref<TableColumnsType>([
  {
    title: '导出时间',
    dataIndex: 'createDate',
    key: 'createDate',
    resizable: true,
    width: 100,
    // sorter: (a: any, b: any) => a.id - b.id,
    align: 'center',
  },
  {
    title: '导出报表',
    dataIndex: 'name',
    key: 'name',
    resizable: true,
    width: 100,
    minWidth: 100,
    maxWidth: 200,
    align: 'center',
  },
  {
    title: '导出状态',
    dataIndex: 'status',
    key: 'status',
    resizable: true,
    width: 100,
    minWidth: 100,
    maxWidth: 200,
    align: 'center',
  },
  {
    title: '操作用户',
    dataIndex: 'creator',
    key: 'creator',
    resizable: true,
    width: 100,
    minWidth: 100,
    maxWidth: 200,
    align: 'center',
  },
  {
    title: '角色',
    dataIndex: 'roleName',
    key: 'roleName',
    resizable: true,
    width: 100,
    minWidth: 100,
    maxWidth: 200,
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'operations',
    key: 'operations',
    resizable: true,
    width: 60,
    fixed: 'right',
    align: 'center',
  },
]);

const pagination = reactive({
  size: "small",
  showSizeChanger: true,
  position: ["bottomCenter"],
  hideOnSinglePage: true,
  current: 1,
  pageSize: 10,
  total: 0,
  onShowSizeChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize
  },
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize
  },
});

const searchData = reactive({
  startDate: "",
  endDate: "",
  selectDateRange: [],
  creator: ""
});
// 搜索区域相关
const dateChangeFunc = (date: any) => {
  if (date) {
    searchData.startDate = date[0];
    searchData.endDate = date[1];
  } else {
    searchData.startDate = "";
    searchData.endDate = "";
  }
}

interface DataItem {
  id: number;
  key: string;
  sequence: string;
  createDate: string;
  name: string;
  status: string,
  creator: string,
  roleName: string,
}

const dataSource = ref([] as DataItem[]);

const getExportCord = () => {


  let param = Object.assign({}, searchData)
  param.startDate = searchData.startDate ? dayjs(searchData.startDate).format('YYYY-MM-DD 00:00:00') : "";
  param.endDate = searchData.endDate ? dayjs(searchData.endDate).format('YYYY-MM-DD 23:59:59') : "";

  post(`/mediaExport/pageList`, param, {
    current: pagination.current,
    size: pagination.pageSize,
  }).then((res: any) => {
    if (res.errCode == 0) {
      let roleList = [];
      roleList = Object.assign(res.data.records);
      dataSource.value = roleList;
      pagination.total = res.data.total;
    } else {
      message.warning(res.msg);
    }
  });
};

const handleTableChange = () => {
  getExportCord();
};
const handleResizeColumn = (w: any, col: any) => {
  col.width = w;
};

const searchFunc = () => {
  pagination.current = 1;
  getExportCord();
}
const downloadFunc = (record: any) => {

  if (record.status != 0) {
    post(`/mediaExport/download`, record).then((res: any) => {
      if (res.errCode != 0) {
        message.warning(res.msg);
      }
    });

    let link = document.createElement("a");
    link.style.display = "none";
    link.href = record.url;
    link.setAttribute("download", record.name);
    document.body.appendChild(link);
    link.click();
  } else {
    message.info("导出中请稍等！");
  }

};
const deleteFunc = (record: any) => {
};



onMounted(() => {
  // 获取导出记录
  getExportCord();
});

</script>
<style lang="less" scoped>
.single-page {
  .table-bar {
    padding: 30px 10px 10px 10px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }

  .content-area {
    width: 100%;
  }
}

.operations-style {
  display: flex;
  justify-content: center;
}
</style>
<style lang="less" scoped>
@import "@/style/page.less";
</style>